<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Loading</title>
	<style>
		.circleProgress_wrapper{
		    width: 40px;
		    height: 40px;
		    margin: 50px ;
		    position: relative;
		    display: inline-block;
		}
		.number{
			position: relative;
			width: 40px;
		    height: 40px;
		    text-align: center;
		    line-height: 40px;
		    font-size: 16px;
		    color: red;
		    font-weight: bold;
		}
		.wrapper{
		    width: 20px;
		    height: 40px;
		    position: absolute;
		    top:0;
		    overflow: hidden;
		}
		.right{
		    right:0;
		}
		.left{
		    left:0;
		}
		.circleProgress{
		    width: 36px;
		    height: 36px;
		    border:2px solid #DDD;
		    border-radius: 50%;
		    position: absolute;
		    top:0;
		}
		.rightcircle{
		    border-top:2px solid red;
		    border-right:2px solid red;
		    right:0;
		    -webkit-transform: rotate(-135deg);
		    -webkit-animation: circleProgressLoad_right 1s linear infinite;
		}
		
		.leftcircle{
		    border-bottom:2px solid red;
		    border-left:2px solid red;
		    left:0;
		    -webkit-transform: rotate(-135deg);
		    -webkit-animation: circleProgressLoad_left 1s linear infinite;
		}
		@-webkit-keyframes circleProgressLoad_right{
		    0%{
		        -webkit-transform: rotate(-135deg);
		    }
		    30%{
				-webkit-transform: rotate(-45deg);
		    }
		    70%{
				-webkit-transform: rotate(135deg);
		    }
		    100%{
		    	-webkit-transform: rotate(225deg);
		    }
		}
		@-webkit-keyframes circleProgressLoad_left{
		    0%{
		        -webkit-transform: rotate(45deg);
		    }
		    30%{
				-webkit-transform: rotate(135deg);
		    }
		    70%{
				-webkit-transform: rotate(315deg);
		    }
		    100%{
		    	-webkit-transform: rotate(405deg);
		    }
		} 
		.rightcircle2{
		    border-top:2px solid red;
		    border-right:2px solid red;
		    right:0;
		    -webkit-transform: rotate(-135deg);
		    -webkit-animation: circleProgressLoad_right2 1.5s linear infinite;
		}
		
		.leftcircle2{
		    border-bottom:2px solid red;
		    border-left:2px solid red;
		    left:0;
		    -webkit-transform: rotate(-135deg);
		    -webkit-animation: circleProgressLoad_left2 1.5s linear infinite;
		}
		@-webkit-keyframes circleProgressLoad_right2{
		   0%{
		        -webkit-transform: rotate(-135deg);
		    }
		    25%{
				-webkit-transform: rotate(45deg);
		    }
		    25%,50%{
		    	-webkit-transform: rotate(45deg);
		    }
		    75%,100%{
		    	-webkit-transform: rotate(225deg);
		    }
		    
		}
		@-webkit-keyframes circleProgressLoad_left2{
		    0%,25%{
		    	-webkit-transform: rotate(-135deg);
		    }
		    50%{
		    	-webkit-transform: rotate(45deg);
		    }
		    50%,75%{
		    	-webkit-transform: rotate(45deg);
		    }
		    100%{
		    	-webkit-transform: rotate(225deg);
		    }
		} 
		.rightcircle3{
		    border-top:2px solid red;
		    border-right:2px solid red;
		    right:0;
		    -webkit-transform: rotate(-135deg);
		    -webkit-animation: circleProgressLoad_right3 1.5s linear infinite;
		}
		
		.leftcircle3{
		    border-bottom:2px solid red;
		    border-left:2px solid red;
		    left:0;
		    -webkit-transform: rotate(-135deg);
		    -webkit-animation: circleProgressLoad_left3 1.5s linear infinite;
		}
		@-webkit-keyframes circleProgressLoad_right3{
		   0%{
		        -webkit-transform: rotate(-135deg);
		    }
		    100%{
		    	-webkit-transform: rotate(225deg);
		    }
		    
		}
		@-webkit-keyframes circleProgressLoad_left3{
		  0%{
		        -webkit-transform: rotate(-135deg);
		    }
		    100%{
		    	-webkit-transform: rotate(225deg);
		    }
		    
		} 
	</style>
</head>
<body>
<div class="circleProgress_wrapper">
		<div class="number">1</div>
        <div class="wrapper right">
            <div class="circleProgress rightcircle"></div>
        </div>
         <div class="wrapper left">
            <div class="circleProgress leftcircle"></div>
        </div>
 </div>
 <div class="circleProgress_wrapper">
 		<div class="number">2</div>
        <div class="wrapper right">
            <div class="circleProgress rightcircle2"></div>
        </div>
         <div class="wrapper left">
            <div class="circleProgress leftcircle2"></div>
        </div>
 </div>
 <div class="circleProgress_wrapper">
        <div class="number">3</div>
        <div class="wrapper right">
            <div class="circleProgress rightcircle3"></div>
        </div>
         <div class="wrapper left">
            <div class="circleProgress leftcircle3"></div>
        </div>
 </div>
</body>
</html>